<template>
	<view class="container d-flex">
		<view class="head_body">
			<view class="head d-flex">
				<view class="d-flex">
					<view class="head_txt">信阳市</view>
					<view class="head_nav_hight">
						<image class="head_nav" src="/static/images/btm_triangle2.svg"></image>
					</view>
				</view>
				<view class="head_search d-flex">
					<view class="img_search_height">
						<image class="img_search" src="/static/images/search.png"></image>
					</view>
					<input class="input head_input" placeholder="查找门店、筛选门店" placeholder-class="text-color-assist" />
				</view>
			</view>
			<view class="dining d-flex">
				<view v-for="(item,index) in selectList" :key="index" class="go_on"
					:class="isActive==index?'selectTxt':''" @click="change_option(index)">
					{{item}}
				</view>
			</view>
			<view class="division"></view>
			<view class="look_map">返回查看地图>></view>
		</view>
		<view class="uni-list">
			<radio-group>
				<label class="uni-list-cell uni-list-cell-pd d-flex" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio class="addr_radio" :value="item.value" :checked="index === current" />
					</view>
					<view class="addr_list">
						<view class="d-flex addr_name_nav">
							<view class="addr_name">{{item.name}}</view>
							<view class="d-flex addr_loc_nav">
								<view class="img_locat">
									<image class="img_location" src="/static/images/location.png"></image>
								</view>
								<view class="navigation">导航</view>
							</view>
						</view>
						<view class="d-flex addr_area_km">
							<view class="addr_area">{{item.address}}</view>
							<view class="addr_km">距离86.5km</view>
						</view>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="bottom">
			<button class="bottom_btn" type="btn">进入菜单点餐</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '商城佳华店',
						address: '嘉定区叶城路768号',
					},
					{
						value: '2',
						name: '开封鼓楼店',
						address: '鼓楼区鼓楼路352号',
					},
					{
						value: '3',
						name: '法国',
						address: '法国三街道一号',
					},
				],
				current: '',
				selectList: [
					'去过得餐厅', '附近得餐厅'
				],
				isActive: 0
			}
		},
		methods: {
			change_option(index) {
				this.isActive = index
			},
		},
	}
</script>
<style>
	.container {
		width: 100vw;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		background-color: #FFF;
	}

	.head {
		width: 100vw;
		justify-content: space-between;
		flex-shrink: 0;
	}

	.head_txt {
		width: 114rpx;
		margin-left: 20rpx;
		color: #5A5B5C;
		font-size: 26rpx;
		text-align: center;
		height: 61rpx;
		line-height: 61rpx;
		margin-right: -24rpx;
	}

	.head_nav {
		width: 41rpx;
		height: 41rpx;
		margin-top: 10rpx;
		flex-shrink: 0;
	}

	.head_search {
		width: calc(100vw - 154rpx);
		justify-content: left;
		margin-right: 20rpx;
		padding: 7rpx;
		height: 61rpx;
		background: #e8e4e4;
	}

	.img_search_height {
		height: 57rpx;
		line-height: 57rpx;
	}

	.img_search {
		margin-left: 10rpx;
		height: 35rpx;
		width: 35rpx;
	}

	.head_input {
		flex: 1;
		margin-left: 5rpx;
		height: 40rpx;
		font-size: 28rpx;
		background: #e8e4e4;
	}

	.dining {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 31rpx;
	}

	.go_on {
		width: 28vw;
		margin: 0 11vw;
	}

	.selectTxt {
		color: rgb(135, 186, 68);
		border-bottom: 4rpx solid rgb(135, 186, 68);
	}

	.division {
		height: 11rpx;
		width: 100vw;
		background: #e8e4e4;
	}

	.look_map {
		width: 100vw;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		font-size: 26rpx;
		color: #5A5B5C;
	}

	.uni-list {
		flex:1;
		overflow:scroll;
		margin-left: 20rpx;
		margin-top: -15rpx;
	}

	.uni-list-cell {
		margin-top: 15rpx;
	}

	.addr_radio {
		height: 88rpx;
		line-height: 88rpx;
	}

	.addr_list {
		height: 88rpx;
	}

	.addr_name {
		font-size: 40rpx;
	}

	.addr_area {
		font-size: 30rpx;
		color: #838381;
	}

	.addr_area_km {
		width: 85vw;
		justify-content: space-between;
	}

	.addr_km {
		font-size: 25rpx;
		color: #838381;
	}

	.addr_name_nav {
		width: 85vw;
		justify-content: space-between;
	}

	.addr_loc_nav {
		flex-shrink: 0;
		text-align: center;
		border: 1rpx solid #5A5B5C;
		width: 130rpx;
		height: 47rpx;
		border-radius: 30rpx;
	}

	.img_locat {
		height: 53rpx;
		line-height: 53rpx;
		margin-left: 10rpx;
	}

	.img_location {
		width: 40rpx;
		height: 40rpx;
	}

	.navigation {
		height: 43rpx;
		line-height: 43rpx;
		font-size: 25rpx;
	}
	.bottom{
		justify-content: space-between;
		text-align: center;
	}
	.bottom_btn{
		color: #FFF;
		background-color: rgb(135, 186, 68);
		margin: 0 1vw 2vw 1vw;
		line-height: 90rpx;
		height: 90rpx;
		border-radius: 60rpx;
		font-size: 35rpx;
	}
</style>
